<template>
  <div>
    <van-form>
      <van-cell-group inset>
        <van-field
          v-model="user.name"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="user.pwd"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <!-- <van-field
          class="left"
          v-model="user.captcha"
          name="验证码"
          label="验证码"
          placeholder="验证码"
          :rules="[{ required: true, message: '请填写验证码' }]"
        />
        <p class="yzm" v-html="yzm"></p> -->
      </van-cell-group>
      <div style="margin: 16px">
        <van-button
          @click="deng"
          round
          block
          type="primary"
          native-type="submit"
        >
          注册
        </van-button>
      </div>
    </van-form>
    <a href="/login">已有账号 登录</a>
  </div>
</template>
  
  <script lang='ts' setup>
import { ref, reactive, onMounted } from "vue";
import { getcaptcha, login, register } from "../../api/api";

// 表单数据
const user = reactive({
  name: "",
  pwd: "",
  captcha: "",
});

// 验证码
const yzm = ref("");

onMounted(() => {
  getcaptcha().then((res) => {
    yzm.value = res.data;
  });
});

const deng = () => {
  console.log(user);
  register(user).then((res) => {
    console.log(res);
    if (res.data.code == 5) {
      alert("用户已存在 可以登录");
    }
    if (res.data.code == 6) {
      alert("注册成功 可以登录");
    }
  });
};
</script>
  
  <style scoped>
.left {
  width: 230px;
  /* height: 50px; */
  float: left;
}
.yzm {
  /* float: right; */
}
</style>
  